import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-settings',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="settings-page">
      <h2>系统设置</h2>

      <div class="settings-grid">
        <!-- 基本设置 -->
        <div class="settings-section">
          <h3>
            <i class="fas fa-cog"></i>
            基本设置
          </h3>
          <div class="setting-item">
            <label>系统名称</label>
            <input type="text" [(ngModel)]="settings.systemName">
          </div>
          <div class="setting-item">
            <label>系统描述</label>
            <textarea [(ngModel)]="settings.description" rows="3"></textarea>
          </div>
          <div class="setting-item">
            <label>维护模式</label>
            <div class="toggle-switch">
              <input type="checkbox" [(ngModel)]="settings.maintenanceMode" id="maintenance">
              <label for="maintenance"></label>
            </div>
          </div>
        </div>

        <!-- 安全设置 -->
        <div class="settings-section">
          <h3>
            <i class="fas fa-shield-alt"></i>
            安全设置
          </h3>
          <div class="setting-item">
            <label>密码最小长度</label>
            <input type="number" [(ngModel)]="settings.minPasswordLength" min="6">
          </div>
          <div class="setting-item">
            <label>登录尝试次数</label>
            <input type="number" [(ngModel)]="settings.maxLoginAttempts" min="1">
          </div>
          <div class="setting-item">
            <label>启用双因素认证</label>
            <div class="toggle-switch">
              <input type="checkbox" [(ngModel)]="settings.twoFactorAuth" id="2fa">
              <label for="2fa"></label>
            </div>
          </div>
        </div>

        <!-- 通知设置 -->
        <div class="settings-section">
          <h3>
            <i class="fas fa-bell"></i>
            通知设置
          </h3>
          <div class="setting-item">
            <label>邮件通知</label>
            <div class="toggle-switch">
              <input type="checkbox" [(ngModel)]="settings.emailNotifications" id="email">
              <label for="email"></label>
            </div>
          </div>
          <div class="setting-item">
            <label>系统通知</label>
            <div class="toggle-switch">
              <input type="checkbox" [(ngModel)]="settings.systemNotifications" id="system">
              <label for="system"></label>
            </div>
          </div>
        </div>

        <!-- 备份设置 -->
        <div class="settings-section">
          <h3>
            <i class="fas fa-database"></i>
            备份设置
          </h3>
          <div class="setting-item">
            <label>自动备份</label>
            <div class="toggle-switch">
              <input type="checkbox" [(ngModel)]="settings.autoBackup" id="backup">
              <label for="backup"></label>
            </div>
          </div>
          <div class="setting-item">
            <label>备份频率</label>
            <select [(ngModel)]="settings.backupFrequency">
              <option value="daily">每天</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
            </select>
          </div>
        </div>
      </div>

      <div class="settings-actions">
        <button class="save-btn" (click)="saveSettings()">
          <i class="fas fa-save"></i>
          保存设置
        </button>
        <button class="reset-btn" (click)="resetSettings()">
          <i class="fas fa-undo"></i>
          重置设置
        </button>
      </div>
    </div>
  `,
  styles: [`
    .settings-page {
      padding: 20px;
    }

    h2 {
      color: #2c3e50;
      margin-bottom: 30px;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .settings-section {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .settings-section h3 {
      color: #2c3e50;
      margin: 0 0 20px 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .settings-section h3 i {
      color: #3498db;
    }

    .setting-item {
      margin-bottom: 20px;
    }

    .setting-item:last-child {
      margin-bottom: 0;
    }

    .setting-item label {
      display: block;
      margin-bottom: 8px;
      color: #2c3e50;
    }

    .setting-item input[type="text"],
    .setting-item input[type="number"],
    .setting-item select,
    .setting-item textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
    }

    .setting-item textarea {
      resize: vertical;
    }

    .toggle-switch {
      position: relative;
      width: 50px;
      height: 24px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-switch label {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }

    .toggle-switch label:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    .toggle-switch input:checked + label {
      background-color: #3498db;
    }

    .toggle-switch input:checked + label:before {
      transform: translateX(26px);
    }

    .settings-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    .save-btn,
    .reset-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.3s;
    }

    .save-btn {
      background-color: #3498db;
      color: white;
    }

    .save-btn:hover {
      background-color: #2980b9;
    }

    .reset-btn {
      background-color: #95a5a6;
      color: white;
    }

    .reset-btn:hover {
      background-color: #7f8c8d;
    }
  `]
})
export class SettingsComponent {
  settings = {
    systemName: '管理系统',
    description: '这是一个功能强大的管理系统平台',
    maintenanceMode: false,
    minPasswordLength: 8,
    maxLoginAttempts: 5,
    twoFactorAuth: false,
    emailNotifications: true,
    systemNotifications: true,
    autoBackup: true,
    backupFrequency: 'daily'
  };

  saveSettings(): void {
    // 实现保存设置的逻辑
    console.log('保存设置:', this.settings);
  }

  resetSettings(): void {
    // 实现重置设置的逻辑
    this.settings = {
      systemName: '管理系统',
      description: '这是一个功能强大的管理系统平台',
      maintenanceMode: false,
      minPasswordLength: 8,
      maxLoginAttempts: 5,
      twoFactorAuth: false,
      emailNotifications: true,
      systemNotifications: true,
      autoBackup: true,
      backupFrequency: 'daily'
    };
  }
}